import React, { useEffect, useState, useRef } from "react";
import "./index.less";
import { NavBar, Tabs, Badge, Toast, Dialog } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import { opinionPublicity,addPointViewVote } from "../service";
const PublicityOfIdeas: React.FC = () => {
  const navigate = useNavigate();
  const [dataList, setDataList] = useState([])
  const [articleId, setArticleId] = useState<string>("")
  const [user,setUser]=useState<any>({})
  const childRef = useRef(null);
  const goto = (url: string) => (e) => {
    navigate(url);
    // 阻止事件冒泡
    e.stopPropagation();
  }

  useEffect(() => {
    const id = location?.search?.substring(1)
    setArticleId(id.split("=")?.[1]);
    const users = JSON.parse(
      localStorage.getItem("users") || JSON.stringify({})
    );
    setUser(users)
  }, [location])

  useEffect(() => {
    if (articleId) {
      opinionPublicity({ villageCode: "511602006004",residentDeliberationId:articleId/* classType:selectType  */ })
      .then((res) => {
        if (res.code == 200) {
          setDataList(res?.data);
        }
      })
      .catch((error) => {
        console.log(error);
      });
    }
  }, [articleId])
  return (
    <div className="PublicityOfIdeas_contarnier">
      <div className="header-bg">
        <NavBar
          onBack={() => navigate(`/intelligentGovernance/theTownHall/proceedingsDetails?type=proceedingsDetails&&detail=${articleId}`)}
        >
          <div className="commontitle">观点公示</div>
        </NavBar>
      </div>
      <div className="ListOfPartyMembers-content">

        <div className="menberList">
          {
            dataList.map((item, index) => {
              return <div key={index} className="menberList_item"
                onClick={goto(`/intelligentGovernance/viewDetails?residentDeliberationId=${articleId}&&pointViewId=${item?.id}`)}
              >
                <div className="voteBox" ref={childRef}
                  onClick={(e)=>{
                    Dialog.confirm({
                      content: '是否投票该观点',
                      onConfirm: async () => {
                        const params={
                          residentDeliberationId:articleId,
                          pointViewId:item?.id,
                          votePeopleId:user?.user_id||"",
                          votePeopleIdCard:user?.IdCard||"",
                          votePeoplePhone:user?.account||"",
                          votePeopleName:user?.real_name||"",
                        }
                        let res = await addPointViewVote(params)
                        if (res?.code == 200) {
                          Toast.show({
                            icon: 'success',
                            content: '投票成功',
                            position: 'bottom',
                          })
                        }else{
                          Toast.show({
                            icon: 'success',
                            content: '投票失败',
                            position: 'bottom',
                          })
                        }
                     
                      },
                    })
                    e.stopPropagation();
                  }
                  }
                >投票</div>
                <div className="viewpointInformation">
                  <div className="viewpointInformation-photo">
                    <img src={item.img || `/images/userPhoto/photo${index + 1}.png`} alt="" />
                  </div>
                  <div className="viewpointInformation-name">{item.pointViewPeopleName}</div>
                  <div className="viewpointInformation-time">{item.createTime}</div>
                </div>
                <div className="viewpointContent">{item?.pointViewContent}</div>
              </div>
            })
          }
        </div>
      </div>
    </div>
  );
};

export default PublicityOfIdeas;
